/*
* jquery聊天插件
* */
;(function($){
    $.fn.extend({
        chatBox: function(options){
            var _self = $(this).show();
            var defaults = {
                clientId: null,
                clientName: '',
                groupId: null,
                groupName: '',
                fromId: '',
                totalSize: 0,
                totalPage: 1,
                indexPage: 0
            };
            options = $.extend({},defaults, options);
            var chatBoxHtml = '<div class="chat-box">' +
                '    <i class="fa fa-times-circle chat-close"></i>' +
                '    <div class="chat-title">' +
                '        <h3 style="text-align: center;">' + options.groupName + '</h3>' +
                '    </div>' +
                '    <div class="group" group-id="' + options.groupId + '">' +
                '        <div class="group-message">' +
                '            <div class="message-box">' +
                '                <div class="message-container"></div>' +
                '            </div>' +
                '            <div class="send-box" class="col-md-6 col-sm-12"></div>' +
                '            <div class="oper-div">' +
                '                <button class="send-btn">发送</button>' +
                '            </div>' +
                '        </div>' +
                '        <div class="group-members"><ul></ul></div>' +
                '    </div>' +
                '</div>';

            // 添加聊天窗口
            _self.html(chatBoxHtml);
            var messageBox = _self.find('.message-box');
            var messageContainer = messageBox.find('.message-container');
            /* 富文本编辑器 */
            var E = window.wangEditor;
            var editor = new E('.send-box');
            // 自定义菜单配置
            editor.customConfig.uploadImgTimeout = 1000000;
            editor.customConfig.menus = [
                'emoticon',  // 表情
                //'image'  // 插入图片
            ];
            // 隐藏“网络图片”tab
            editor.customConfig.showLinkImg = false;
            // 配置服务器端地址
            editor.customConfig.uploadImgServer = 'http://localhost:8086/ExhibitionWebSocket/webSocket/wangeditorUpload';
            // 将图片大小限制为 10M
            editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
            // 限制一次最多上传 5 张图片
            editor.customConfig.uploadImgMaxLength = 3;
            //文件名称
            editor.customConfig.uploadFileName = 'myFileName';
            editor.customConfig.uploadImgHeaders = {
                'Accept' : 'multipart/form-data'
            };

            editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                    $(".loading-image").removeClass("hide");
                },
                fail: function (xhr, editor, result) {
                    flavrShow("图片上传失败","red");
                    $(".loading-image").addClass("hide");
                },
                error: function (xhr, editor) {
                    flavrShow("图片上传失败","red");
                    $(".loading-image").addClass("hide");
                },
                timeout: function (xhr, editor) {
                    flavrShow("图片上传超时","red");
                    $(".loading-image").addClass("hide");
                },
                customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    if(result.errno == 1){
                        flavrShow("图片上传失败","red");
                    }else{
                        var url = result.data[0];
                        insertImg(url);
                    }
                    $(".loading-image").addClass("hide");
                    // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            };

            //    editor.customConfig.debug=true;
            editor.create();

            /* 查看历史聊天记录 */
            var messageTotalSize = options.totalSize, messageTotalPage = options.totalPage,messageIndexPage = 0;
            function getMessageList() {
                options.indexPage++;
                if(options.indexPage <= options.totalPage) {
                    publicAjax(basePath + '/charts/hospital/overview/chat/queryGroupChatRecord', 'post', options, function (data) {
                        if (data.ret == 200) {
                            var nextPageMessage = '';
                            for (var x = 0; x < data.data.length; x++) {
                                nextPageMessage += data.data[x].contentHtml;
                            }
                            var height = messageContainer.height();
                            messageContainer.prepend(nextPageMessage);
                            var imgs = messageContainer.find("img");
                            imgs.viewer();
                            var num = imgs.length;
                            imgs.on('load', function () {
                                num--;
                                if (num > 0) {
                                    return;
                                }
                                messageBox.scrollTop(messageBox[0].scrollHeight);
                                imgs.off('load', 'img');
                            });
                            if (options.indexPage == 1) {//首次加载，滚动条在最底端
                                messageBox.scrollTop(messageBox[0].scrollHeight);
                            } else {
                                messageBox.scrollTop(messageContainer.height() - height);
                            }
                            if (options.indexPage < options.totalPage) {
                                messageBox.scroll(function (e) {
                                    if ($(this).scrollTop() <= 0) { //在滚动条距离顶部小于10时候加载数据
                                        $(this).off();
                                        getMessageList();  //滚动到顶部 获取下一页数据
                                    }
                                })
                            }
                        } else {
                            flavrShow("数加载据失败", "red");
                        }
                    }, true);
                }
            }
            getMessageList();

            //将消息显示在网页上
            window.setMessageInnerHTML =  function (innerHTML) {
                messageContainer.append(innerHTML);
                messageContainer.find("img").viewer();
                messageBox.scrollTop(messageBox[0].scrollHeight);
            }
            //发送消息
            var sendInputEl = _self.find(".w-e-text");
            function send() {
                var sendTextEl = sendInputEl.find('p');
                if(sendTextEl.text().trim().length || sendTextEl.html().indexOf("<img src") !== -1){
                    var json = editor.txt.getJSON();  // 获取 JSON 格式的内容
                    var sendText = [];
                    console.log(json);
                    for(var x=0;x<json.length;x++){
                        if(typeof(json[x].children[0]) == "string" && json[x].children[0].trim().length){//表示有内容，不是空的
                            sendText.push(json[x]);
                        }else if(json[x].children[0].tag == "img"){//图片或者表情
                            sendText.push(json[x]);
                        }
                    }
                    var jsonObj = {"message":sendText,"groupId": options.groupId};
                    var jsonStr = JSON.stringify(jsonObj);
                    webSocketObj.send(jsonStr);
                    sendInputEl.html("<p><br></p>");
                }
            }
            _self.find('.send-btn').off().click(send);
            document.onkeydown = function(e){
                var ev = document.all ? window.event : e;
                if(ev.ctrlKey && ev.keyCode==13) {// 如（ev.ctrlKey && ev.keyCode==13）为ctrl+Center 触发
                    //要处理的事件
                    send();
                }
            };

            /* 获取成员列表 */
            var membersPage = 0; totalMemberPage = 1;
            function getGroupMembers(){
                membersPage++;
                if(membersPage <= totalMemberPage){
                    publicAjax(basePath + '/charts/hospital/overview/chat/queryGroupMembers', 'post', {groupId: options.groupId, start: (membersPage-1)*20, limit: 20}, function (data) {
                        if(data.ret == 200){
                            totalMemberPage = Math.ceil(data.data.totalCount/20);
                            for(var i=0;i<data.data.data.length;i++){
                                _self.find(".group-members ul").append('<li>\
                                    <p class="big-p">'+(data.data.data[i].userName || '')+'（'+(data.data.data[i].roleName || '')+'）</p>\
                                    <p class="small-p">'+(data.data.data[i].unitName || '')+'</p>\
                                </li>');
                            }
                        }else{
                            flavrShow(data.msg,"red");
                        }
                    }, true);
                }
            }
            getGroupMembers();
            _self.find(".group-members").scroll(function(e){//判断是否滚动到底部，滚动到底部加载数据（群成员）
                if($(this).find("ul").height()- $(this).height() >= $(this).scrollTop()){
                    getGroupMembers();
                }
            });

            /* 关闭聊天窗口 */
            _self.find('i.chat-close').off().click(function () {
                _self.empty().hide();
            });

            return _self;
        }
    });

})(jQuery);//此处也可写成(jQuery);